<template>
	<view class="relative">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="自定义优惠券" fontColor="#FFFFFF" navbarType='5'></wlk-navbar>
		<view class="container">
			<u--form :model="model" @submit="formSubmit" ref="uForm">
				<u-form-item label="优惠券名称" labelWidth="auto" borderBottom prop="couponInfo.name">
					<u--input name="name" v-model="model.couponInfo.name" placeholder="请输入名称" border="none"></u--input>
				</u-form-item>
				<u-form-item label="优惠券类型" labelWidth="auto" borderBottom prop="couponInfo.type">
					<u-radio-group v-model="radiovalue" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="最低消费金额" labelWidth="auto" borderBottom prop="couponInfo.min_price">
					<u--input type='digit' name="min_price" v-model="model.couponInfo.min_price" placeholder="请输入最低消费金额"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="优惠金额" labelWidth="auto" borderBottom prop="couponInfo.sub_price">
					<u--input type='digit' name="sub_price" v-model="model.couponInfo.sub_price" placeholder="请输入优惠金额"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="有效期开始时间" labelWidth="auto" prop="couponInfo.begin_time">
					<u-icon slot="right" name="arrow-right" @click="display = true"></u-icon>
					<u-input :value="model.couponInfo.begin_time" placeholder="请选择有效期开始时间" @focus="display = true"
						border="none"></u-input>
					<u-datetime-picker ref="datetimePicker" closeOnClickOverlay @closeOnClickOverlay="true"
						@cancel="display = false" @confirm="affirm" @close="display = false" :formatter="formatter"
						:show="display" v-model="value" mode="datetime"></u-datetime-picker>
				</u-form-item>
				<u-form-item label="有效期结束时间" labelWidth="auto" prop="couponInfo.end_time">
					<u-icon slot="right" name="arrow-right" @click="show = true"></u-icon>
					<u-input :value="model.couponInfo.end_time" placeholder="请选择有效期结束时间" @focus="show = true"
						border="none"></u-input>
					<u-datetime-picker ref="datetimePicker" closeOnClickOverlay @closeOnClickOverlay="true"
						@cancel="show = false" @confirm="confirm" @close="show = false" :formatter="formatter"
						:show="show" v-model="value" mode="datetime"></u-datetime-picker>
				</u-form-item>
				<view class="mt80">
					<u-button text='提交' @click="submit" form-type="submit" type="primary"></u-button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show: false,
				display: false,
				value: Number(new Date()),
				model: {
					couponInfo: {
						name: '',
						type: 2,
						min_price: '',
						sub_price: '',
						begin_time: '',
						end_time: '',
					}
				},
				radiolist: [{
					name: '满减券',
					disabled: false
				}],
				radiovalue: '满减券'
			}
		},
		onLoad() {
			_self = this;
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			async affirm(e) {
				let time = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				this.model.couponInfo.begin_time = time
				this.display = false
			},
			async confirm(e) {
				let timeValue = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				this.model.couponInfo.end_time = timeValue
				this.show = false
			},
			submit() {
				console.log(this.model.couponInfo)
				if (this.model.couponInfo.name == "") {
					uni.showToast({
						title: '请填写优惠券名称',
						icon: "none",
					})
				} else if (this.model.couponInfo.min_price == "") {
					uni.showToast({
						title: '请填写最低消费金额',
						icon: "none",
					})
				} else if (this.model.couponInfo.sub_price == "") {
					uni.showToast({
						title: '请填写优惠金额',
						icon: "none",
					})
				} else if (this.model.couponInfo.begin_time >= this.model.couponInfo.end_time) {
					uni.showToast({
						title: '优惠券结束时间必须大于开始时间',
						icon: "none",
					})
				} else {
					uni.$u.http.post('coupon/create', {
						couponInfo: this.model.couponInfo
					}).then(res => {
						setTimeout(() => {
							if (res.code == 1) {
								uni.$emit('setId', res.data)
								uni.navigateBack()
							}
						}, 2000)
					})
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
		}
	}
</script>

<style scoped lang="scss">

</style>